<template>
  <div class="hello">
    <div style="display: flex">
      <el-input v-model="searchkey"></el-input>
      <el-button @click="search">查询</el-button>
    </div>
    <el-table :data="bookList" stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="封面">
            <template slot-scope="scope">
                <div v-if="scope.row.imgurl">
                    <img :src="scope.row.imgurl" style="width: 90px;height: 110px;cursor: pointer" @click="imgClick(scope.row)">
                </div>
                <div v-else @click="imgClick(scope.row)" style="width: 90px;height: 110px;background-color: lightgrey;color: white;font-size: 20px;text-align: center;line-height: 110px;cursor: pointer" >
                    暂无图片
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="title" label="书名" show-overflow-tooltip width="200"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="name" label="出版社"></el-table-column>
        <el-table-column prop="name" label="种类"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
               <el-table-column label="操作">-->
                   <template slot-scope="scope">
                       <el-button size="mini" type="primary"
                                 @click="editBook(scope.row.book)">编辑</el-button>
                       <el-button size="mini" type="danger"
                                 @click="delBook(scope.row)">删除</el-button>
                   </template>
             </el-table-column> 
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-sizes="[2, 5, 10, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <el-dialog
            title="详细信息"
            :visible.sync="dialogVisible"
            width="80%">
        <div>
            <el-descriptions class="margin-top" title="" :column="3" border>
                <el-descriptions-item label="书名" v-if="bookInfo.book">{{bookInfo.book.title}}</el-descriptions-item>
                <el-descriptions-item label="作者" v-if="bookInfo.book">{{bookInfo.book.author}}</el-descriptions-item>
                <el-descriptions-item label="价格" v-if="bookInfo.book">￥{{bookInfo.book.price}}</el-descriptions-item>
                <el-descriptions-item label="出版社" v-if="bookInfo.book">{{bookInfo.publisher.name}}</el-descriptions-item>
                <el-descriptions-item label="类型" v-if="bookInfo.book">{{bookInfo.bookType.name}}</el-descriptions-item>
                <el-descriptions-item label="isbn号" v-if="bookInfo.book">{{bookInfo.book.isbn}}</el-descriptions-item>
                <el-descriptions-item label="简洁" v-if="bookInfo.book" :span="3">{{bookInfo.book.introduction}}</el-descriptions-item>
            </el-descriptions>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "../utils/request" //引入request（包装好的axios）来发起请求
export default {
  name: 'Home',
  data:function (){
    return {
      searchkey:"",
      bookList:[],
      pageIndex:1,
      pageSize:5,
      total:0,
      dialogVisible:false,
      bookInfo:{},
    }
  },
  created(){
      this.getBookList();
  },
  methods:{
      //跳转路由
      //this.$router.push("/regist")
      getBookList(){
          let that = this
          request({
            // url:'http://192.168.201.165:10002/api/book/findAllDoc',
              url:'http://localhost:9090/bookMall/book/findAll',
              params:{
                  pageIndex: that.pageIndex,
                  pageSize: that.pageSize,
                  searchkey:that.searchkey
              },
              method:"get",
              headers:{token:localStorage.getItem("token")?localStorage.getItem("token"):"aaa"}
          })
              .then(function (res) {
                  console.log(res.data);
                  that.bookList=res.data.result
                  that.pageIndex=res.data.pageIndex
                  that.pageSize=res.data.pageSize
                  that.total=res.data.total
              })
              .catch(function (error) {
                  console.log(error);
              });
      },
      editBook(row){
          let that = this
      },
      delBook(row){
          this.dialogVisible=true;
          this.bookInfo=row;
      },
      search(){
          this.getBookList();
      },
      imgClick(row){
          console.log(row)
          this.dialogVisible=true
          this.bookInfo=row
      },
      handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize=val
          this.getBookList();
      },
      handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.pageIndex=val
          this.getBookList();
      },
  }
}
</script>

<style scoped>
</style>
